<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>停车动画</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <style type="text/css">
        body,div,img{
            margin: 0;
            padding: 0;
        }
        .boxgrid {
            margin: 100px auto;
            width: 600px;
            border: 2px solid #8399af;
            background: #d5dee7;
            position: relative;
        }
        .car {
            position: absolute;
            top: 0;
            left: 360px;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".car").click(function(){
                var top=parseInt($(".car").css("top"));
                var left=parseInt($(".car").css("left"));
                if(top==0){
                    $(".car").animate({top:"56px"},"slow").animate({left:"90px"},"slow");
                }else if(left==90){
                    $(".car").animate({left:"360px"},"slow").animate({top:"0px"},"slow");
                }
            });
        });
    </script>
</head>
<body>
    <div class="boxgrid">
        <img src="images/carport.png"/>
        <img class="car" src="images/car.png"/>
    </div>
</body>
</html>